<template>
  <div class="navMenu" style="background-color: #1f2d3d">
    <label v-for="navMenu in navMenus">
      <!--只有一级菜单-->
      <el-menu-item
        v-if="!navMenu.children"
        :index="'/' + navMenu.url"
        :key="navMenu.menuid"
      >
        <!--图标-->
        <i :class="navMenu.icon"></i>
        <!--标题-->
        <span slot="title">{{ navMenu.menuname }}</span>
      </el-menu-item>
      <!--有多级菜单-->

      <el-submenu
        v-if="navMenu.children"
        :index="'/' + navMenu.url"
        :key="navMenu.menuid"
      >
        <template slot="title">
          <i :class="navMenu.icon"></i>
          <span> {{ navMenu.menuname }}</span>
        </template>
        <!--递归组件，把遍历的值传回子组件，完成递归调用-->
        <nav-menu :navMenus="navMenu.children"></nav-menu>
      </el-submenu>
    </label>
  </div>
</template>
<script>
export default {
  name: "NavMenu",
  props: ["navMenus"], // 传入子组件的数据
  data() {
    return {};
  },
  mounted() {}
  //   // 创建完毕状态(里面是操作)
  //   created() {
  //     //初始化menuList菜单栏数据
  //     this.menulist = this.rightList;
  //   },
  //   computed: {
  //     ...mapState(["rightList"])
  //   }
};
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}
.el-menu-item-group__title {
  padding: 0px;
}
.el-menu-bg {
  background-color: #1f2d3d;
}
.el-menu {
  border: none;
}
.logobox {
  height: 40px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}
.logoimg {
  height: 40px;
}
</style>
